<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: utils/interactions/drag.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: utils/interactions/drag.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * 自定义地图物件拖动类
 *
 * @example
 * /src/utils/interaction/drag 
 * 实例化参数： 
 * {
 *   featureDefine: (feature) => { return feature }
 * } 
 */
import {Pointer as PointerInteraction} from 'ol/interaction.js'

/**
 * @class ol.interaction.drag 
 * @classdesc 自定义拖动交互类。
 * @param {VueComponent} mapVueComp xdh-Map 主体组件
 * @param {Object} options - 参数。
 * @param {boolean} [options.featureDefine = (feature) => { return feature }] - 定义可拖动的物件。
 */ 
class Drag {
 
  constructor(mapVm, options) {
    /**
     * @type {module:ol/pixel~Pixel}
     */
    this.coordinate_ = null;

    /**
     * @type {string|undefined}
     */
    this.cursor_ = 'pointer'; 

    /**
     * @type {module:ol/Feature~Feature}
     */
    this.feature_ = null;

    /**
     * @type {string|undefined}
     */
    this.previousCursor_ = undefined;

    function handleDownEvent(evt) {
      let map = evt.map
       
      let feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => {
        if (options.featureDefine) {
          return options.featureDefine.call(this, feature)
        } else {
          return feature
        }
      })
       
      if (feature) {
        this.coordinate_ = evt.coordinate;
        this.feature_ = feature;
        /**
         * 拖动Feature鼠标点下时触发
         * @event on-dragDown
         * @param {Feature} feature
         * @param {Object} event
         */
        mapVm.$emit('on-dragDown', feature, evt)
      }
    

      return !!feature
    }
    function handleDragEvent(evt) {
      // 获取 移动开始 时的 XY 坐标
      let deltaX = evt.coordinate[0] - this.coordinate_[0];
      let deltaY = evt.coordinate[1] - this.coordinate_[1];

      // 获取地图上的物件
      let geometry = this.feature_.getGeometry()
      geometry.translate(deltaX, deltaY) // 让物件跟随移动

      this.coordinate_[0] = evt.coordinate[0]
      this.coordinate_[1] = evt.coordinate[1]
      /**
       * 拖动Feature鼠标拖动过程中触发
       * @event on-dragMove
       * @param {Feature} feature
       * @param {Object} event
       */
      mapVm.$emit('on-dragMove', this.feature_, evt)
    }

    // 鼠标 在地图上移动（非拖动时）
    function handleMoveEvent(evt) {
      if (this.cursor_) {
        let map = evt.map
        // 获取 地图上的 物体
        let feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => { 
          // return feature
          if (options.featureDefine) {
            return options.featureDefine.call(this, feature)
          } else {
            return feature
          } 
        })

        let element = evt.map.getTargetElement() // 获取地图容器div
        
        if (feature) { // 如果鼠标经过地图上的物体存在时
          if (element.style.cursor !== this.cursor_) { // 判断 鼠标的 'cursor' 样式 是否为 pointer 
            this.previousCursor_ = element.style.cursor; // 记录当前 cursor 的样式值
            element.style.cursor = this.cursor_; // 将cursor样式 设为 pointer
          }
        } else if (this.previousCursor_ !== undefined) { // 还原
          element.style.cursor = this.previousCursor_;
          this.previousCursor_ = undefined;
        }
      }
    }
    function handleUpEvent(evt) {
      /**
       * 拖动Feature鼠标放开后触发
       * @event on-dragUp
       * @param {Feature} feature
       * @param {Object} event
       */
      mapVm.$emit('on-dragUp', this.feature_, evt)
      this.coordinate_ = null;
      this.feature_ = null;
      return false;
    }

    return new PointerInteraction({
      handleDownEvent: handleDownEvent.bind(this),
      handleDragEvent: handleDragEvent.bind(this),
      handleMoveEvent: handleMoveEvent.bind(this),
      handleUpEvent: handleUpEvent.bind(this)
    }) 
  }
}



export default Drag</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
